<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
    <div id="app">
        <!-- 父组件可以在引用子组件的时候，通过属性绑定（v-bind）的形式，把需要传递给子组件的数据，
            以属性绑定的形式，传递到子组件内部，供子组件使用 -->
        <com1 :parentmsg="msg"></com1>
    </div>

    <script>
        //创建Vue实例,得到 ViewModel
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '123 父组件中的数据'
            },
            methods: {},
            components: {
                com1: {
                    // 结论：经过演示，发现，子组件中，默认无法访问到 父组件中的 data 上的数据 和 methods 中的方法
                    // template: '<h1>这是子组件 --- {{msg}}</h1>'
                    // data 上的数据，都是可读可写的；
                    data() { // 注意： 子组件中的data数据，并不是通过父组件传递过来的，而是子组件自身私有的，比如：子组件通过 Ajax ,请求回来的数据，都可以放到data身上；
                        return {
                            title: '123',
                            content: 'qqq'
                        }
                    },
                    template: '<h1 @click="change">这是子组件 --- {{parentmsg}}</h1>',
                    // 注意：组件中的所有props中的数据，都是通过 父组件传递给子组件的
                    // props 中的数据，都是只读的，无法重新赋值
                    props: ['parentmsg'], // 把父组件传递过来的 parenting属性，先在 props数组中，定义一下，这样才能使用这个数据
                    directives: {},
                    filters: {},
                    components: {},
                    methods: {
                        change() {
                            this.parentmsg = '被修改了' // 这样做 会有警告 不推荐使用
                        }
                    }
                }
            }
        });
    </script>
</body>

</html>